<template>
  <article class="coordinate-track">
    <div class="gis-container" ref="gisAppRef"></div>
  </article>
</template>
<script lang="ts" setup>
import { PropType, onUnmounted, watchEffect } from 'vue';
import useGis from '../object-edit/hooks/gis';
import { Console } from 'console';
const props = defineProps({
  points: {
    type: Array as PropType<number[]>,
    default: () => [],
  },
  pluginClass: {
    type: String,
    require: true,
  },
});
const { gisAppRef, customPlugin, isInit } = useGis(props.pluginClass || 'PluginYLYLH');
let _destroy: any = null;
watchEffect(() => {
  if (isInit.value) {
    console.log(customPlugin.value);
    console.log(props.points);
    const { destroy, flyTo } = customPlugin.value!.addPolylineFromPoints({
      points: props.points,
      width: 4,
      color: '#0f93ff',
    });
    flyTo(2, 12);
    _destroy = destroy;
  }
});
onUnmounted(() => {
  _destroy && _destroy();
});
</script>
<style lang="less" scoped>
.coordinate-track {
  width: 100%;
  height: 550px;
}
.gis-container {
  height: 100%;
  /*   min-height: 550px; */
}
</style>
